<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .father{
            width:500px;
            height:500px;
            margin:100px auto;
            /* 设置透视 实现3D最关键的属性，距离越小越明显 */
            perspective: 800px;
            perspective-origin: left top;
            /* 3D效果 */
            transform-style: preserve-3d;
        }

        .box {
            width:200px;
            height:200px;
            background-color: red;
            margin-bottom:20px;
        }

        .box:nth-child(1):hover{
            transform: rotateX(40deg) translateZ(100px);
        }

        .box:nth-child(2):hover{
            transform: rotateY(40deg);
        }

        .box:nth-child(3):hover{
            transform: rotateZ(40deg);
        }
    </style>
</head>
<body>
<!-- transform 3D 在2D的基础上增加z粙 -->
<div class = "father">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

</body>
</html>
